<template>
  <div>
    <!-- 押金单待支付 -->
    <el-dialog
      v-el-drag-dialog
      title="订单待支付"
      :visible.sync="visible"
      width="1024px"
      append-to-body
      @closed="reset"
    >
      <el-form ref="form" class="form" :model="temp" label-width="120px" label-position="right">
        <el-form-item label="订单单号:">
          <el-input
            v-model="temp.orderCode"
            disabled
          />
        </el-form-item>
        <el-form-item label="应支付金额:">
          <el-input
            v-model="temp.treceivables"
            class="cred"
            disabled
          />
        </el-form-item>
      </el-form>
      <div class="code-title">付款码</div>
      <div class="code-img">
        <div v-show="false" ref="qrCodeUrl" />
        <img :key="base64Text" :src="base64Text" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryByCode, queryCheckDepozitPayStatus } from '@/api'
  import QRCode from 'qrcodejs2'
  export default {
    name: 'gather',
    directives: {
      focus: {
        inserted: function(el) {
          el.querySelector('input').focus()
        }
      }
    },
    data() {
      return {
        visible: false,
        mode: 'qrcode', // 付款模式，qrcode扫码，box扫码盒子
        isPayStatus: false, // false初始值表示支付未成功,true表示支付成功
        base64Text: '',
        checkInterval: '',
        timeEndOut: 0,
        temp: {},
        inputCardCode: '' // 扫码盒子扫码完成后返回的字符串
      }
    },
    async created() {},
    methods: {
      open(temp) {
        this.temp = temp
        this.gainQRCode(temp)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 客户押金单支付获取微信/支付宝授权生成二维码
      async gainQRCode(temp) {
        const res = await queryByCode({
          orderCode: temp.orderCode,
          billType: 1
        })
        // const uuid = res.data.prePayId
        const casService = `${res.data}`
        const codeUrl = casService
        this.creatQrCode(codeUrl)
        // 轮询开启
        this.timeEndOut = 1000
        this.checkingPay()
      },
      creatQrCode(url) {
        const code = new QRCode(this.$refs.qrCodeUrl, {
          text: url,
          width: 300,
          height: 300,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.Q
        })
        const canvas = code._el.querySelector('canvas')// 获取生成二维码中的canvas，并将canvas转换成base64
        this.base64Text = canvas.toDataURL('image/png')
      },
      // 定时器
      checkingPay() {
        const _this = this
        _this.checkInterval = setInterval(function() {
          if (_this.timeEndOut === 0) {
            clearInterval(_this.checkInterval)
          }
          if (_this.timeEndOut > 0) {
            var timeEndOut = _this.timeEndOut
            timeEndOut--
            _this.timeEndOut = timeEndOut
            // _this.selectPayStatus()
          }
        }, 1000)
      },
      // 支付轮询查看押金订单是否支付成功
      async selectPayStatus() {
        if (this.isPayStatus) { // 说明支付成功
          return
        }
        const res = await queryCheckDepozitPayStatus({ depositCode: this.temp.depositCode })
        if (res.data.payStatus === 3) { // 表示已支付
          this.closeChecking()
          // 支付成功,修改对应参数信息
          this.isPayStatus = false
          this.$message.info('支付成功')
          this.reset()
        }
      },
      async modeChange(mode) {
        this.mode = mode
        if (mode === 'box') { // 扫码盒子模式
          this.$refs.inputCardCodeDom.focus()
        }
      },
      closeChecking() {
        if (this.checkInterval != null) {
          clearInterval(this.checkInterval)
          this.checkInterval = null
        }
      },
      reset() {
        this.visible = false
        this.isPayStatus = false
        this.base64Text = ''
        this.checkInterval = ''
        this.timeEndOut = 0
        this.activeName = 'first'
        this.inputCardCode = ''
        this.closeChecking()
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
  }
  .block {
    width: 100%;
  }
  .el-tab-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .hide {
    width: 0;
    height: 0;
    /deep/ .el-input__inner {
      width: 0;
      height: 0;
      border: none;
    }
  }
}
.cred {
  /deep/ .el-input__inner {
    color: red !important;
  }
}
.mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}
.code-title {
  width: 100%;
  font-size: 16px;
  text-align: center;
}
.code-img {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
}
</style>
